<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>BOSS-CRM管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include '../include/baselink.ftl'>
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/css/jquery.pagination.css'/>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
    <style>
        .item a {
            text-decoration: none;
        }

        .item a:hover {
            text-decoration: none;
        }
    </style>
</head>
<body class="dashboard-page">
<div id="main">
    <#include '../include/header.ftl'>
    <#include '../include/sidebar.ftl'>

    <section id="content_wrapper">
        <section id="content" class="table-layout animated fadeIn">
            <div class="tray tray-left tray320" data-tray-height="match">
                <div id="jstree"></div>
            </div>
            <div class="tray tray-center" v-show="queryStaff.departmentId != 0">

                <div class="panel" id="spy7" v-show="queryStaff.lxId > 0">
                    <div class="panel-heading">
                        <span class="panel-icon"><i class="fa fa-table"></i></span>
                        <span class="panel-title">励销部门信息</span>
                        <span class="panel-controls">
                        <a href="#" class="panel-control-color"></a>
                        <a href="#" class="panel-control-collapse"></a>
                        <a href="#" class="panel-control-fullscreen"></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div class="panel-body">
                            <table class="table table-striped table-responsive table-bordered table-condensed">
                                <thead>
                                <tr>
                                    <th>励销部门ID</th>
                                    <th>励销部门名称</th>
                                    <th>对应阿米巴ID</th>
                                    <th>对应阿米巴名称</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>{{dept.lxId}}</td>
                                    <td>{{dept.name}}</td>
                                    <td>{{dept.amibaId}}</td>
                                    <td>{{dept.amibaName}}</td>
                                    <td><a data-target="#updateMatchAmibaModal" data-toggle="modal">修改对应阿米巴</a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="panel" id="spy7">
                    <div class="panel-heading">
                        <span class="panel-icon"><i class="fa fa-table"></i></span>
                        <span class="panel-title">用户列表</span>
                        <span class="panel-controls">
                        <a href="#" class="panel-control-color"></a>
                        <a href="#" class="panel-control-collapse"></a>
                        <a href="#" class="panel-control-fullscreen"></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content pn br-n admin-form">
                            <div class="panel">
                                <div class="well well-sm mn">
                                    <form class="form-inline">
                                        <div class="form-group">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-addon btn btn-default">用户名</div>
                                                <input type="text" class="form-control input-sm"
                                                       placeholder="请输入用户"
                                                       v-model="searchInfo.name">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped table-responsive table-bordered table-condensed">
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>角色</th>
                                    <th>所在部门</th>
                                    <th>创建时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="user in staffList">
                                    <td>{{user.name}}</td>
                                    <td>{{user.role}}</td>
                                    <td>{{user.departmentName}}</td>
                                    <td>{{user.createdTime}}</td>
                                </tr>
                                <tr>
                                    <td class="text-center" colspan="20" v-if="staffList.length == 0">
                                        没有数据 ！
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <#include 'updateMatchAmibaModal.ftl'/>
</div>
<#include '../include/footer_js.ftl'/>
<script src="<@s.url '/assets/js/jquery.pagination.min.js'/>"></script>
<script>
    //获取树对象
    var jsAmibaTree = null;
    //关于菜单树操作
    $(function () {
        var nodeCreated = false;
        $('#jstree').jstree({
            core: {
                check_callback: true,
                data: function (node, cb) {
                    if (node.id === "#") {
                        var node = {
                            id: '0',
                            text: '阿米巴列表',
                            data: {'code': 'OTHER'},
                            children: true
                        };
                        var nodes = [];
                        nodes.push(node);
                        cb.call(this, nodes);
                    } else {
                        findAmiba({node: node}, cb);
                    }
                }
            }
        });

        // 展开节点
        $("#jstree").on("loaded.jstree", function (event, data) {
            // 展开所有节点
            $('#jstree').jstree('open_all');
        });

        $('#jstree').on("create_node.jstree", function (node, select, event) {
            nodeCreated = true;
        });

        $('#jstree').on("select_node.jstree", function (event, data) {
            app.$set(app.$data.queryStaff, "lxId", data.node.id);
            app.$set(app.$data.queryStaff, "code", data.node.data.code);
        });

        // 查询阿米巴
        function findAmiba(node, cb) {
            $.ajax({
                type: "POST",
                url: contentPath + "/api/dep/list/" + node.node.id,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
                },
                dataType: "json",
                data: null,
                success: function (data) {
                    if (data.retcode != 2000000) {
                        swal(data.msg);
                        return;
                    }
                    var result = data.data;
                    var nodes = [];
                    $.each(result, function (i, e) {
                        var node = {
                            id: e.lxId,
                            text: e.name,
                            data: {
                                'code': e.code
                            },
                            children: true
                        };
                        nodes.push(node);
                    });
                    cb.call(this, nodes);
                }, error: function (data) {
                    swal(data.responseJSON.msg);
                }
            });
        }

    });

    var app = new Vue({
        el: '#main',
        data: {
            //前台查询对象
            queryStaff: {
                lxId: ''
            },
            searchInfo: {
                name: ''
            },
            //查询结果
            staffList: [],
            allStaffListQuery: {
                pageSize: 1000,
                trueName: null
            },
            dept: {},
            amibaList: []
        },
        created: function () {
            this.findAmibaList();
        },
        mounted: function () {
            toastr.options = {
                closeButton: true,
                debug: false,
                progressBar: true,
                positionClass: "toast-top-right",
                onclick: null,
                showDuration: "1000",
                hideDuration: "1000",
                timeOut: "5000",
                extendedTimeOut: "5000",
                showEasing: "swing",
                hideEasing: "linear",
                showMethod: "fadeIn",
                hideMethod: "fadeOut"
            };
        },
        watch: {
            //查询部门改变时
            'queryStaff.lxId': function () {
                this.amibaClickHandler();
            },
            'searchInfo.name': function () {
                this.findStaffByName();
            }
        },
        methods: {
            //点击部门后查询初始化
            amibaClickHandler: function () {
                this.searchInfo.name = '';
                this.findAmibaStaffs();
                this.findDeptByLxId(this.queryStaff.lxId);
            },
            //根据部门查询员工
            findAmibaStaffs: function () {
                this.$http.post(contentPath + "/api/user/staffList/" + this.queryStaff.lxId)
                        .then(function (response) {
                            if (response.data.retcode != 2000000) {
                                BootstrapDialog.alert(response.data.msg);
                                return;
                            }
                            if (response.data.data != null) {
                                this.staffList = response.data.data.list;
                            }
                        }, function (response) {
                            BootstrapDialog.alert(response.data.msg);
                        })
            },
            //根据条件查询员工
            findStaffByName: function () {
                var url = contentPath + "/api/user/list";
                this.$http.post(url, this.searchInfo).then(function (response) {
                    this.staffList = response.body.data.list;
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            findDeptByLxId: function (id) {
                let url = contentPath + "/api/dep/query/lxId/" + id;
                this.$http.get(url).then(function (response) {
                    this.dept = response.body.data;
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            findAmibaList: function () {
                let url = contentPath + '/api/view/amiba/list/all';
                this.$http.get(url).then(function (response) {
                    this.amibaList = response.body.data;
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            updateMatchAmiba: function () {
                this.dept.amibaName = $("#updateMatchAmibaSelect option:selected").text();
                this.dept.amibaId = $("#updateMatchAmibaSelect option:selected").val();
                let url = contentPath + '/api/dep/updateMatchAmiba';
                this.$http.post(url, this.dept).then(function (response) {
                    $("#updateMatchAmibaModal").modal('hide');
                    toastr.success("操作成功！");
                }, function (error) {
                    toastr.error(error.body.msg);
                });
            }
        }
    });
</script>
</body>
</html>
